import React,{Component} from 'react';


import {observer,inject} from "mobx-react";
import {computed,toJS} from "mobx";
import {Link} from "react-router-dom";

import {View} from "../component/index";
import {
  FileImageOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined
} from '@ant-design/icons';
import {
  Radio,
  Input,
  Button,
  DatePicker,
  Select
} from "antd";
import moment from "moment";
const {Option}=Select;
const {RangePicker}=DatePicker;


// 编辑优惠券
@inject(["store"])
@observer
class CouponEdit extends Component{
  constructor(props){
    super(props);
    this.store = props.store;
    this.coupon = props.store.storeCouponEdit;
    this.coupon.set("id",this.props.match.params.id?this.props.match.params.id:0);
    this.coupon.init();
  }
  
  componentDidMount(){
    this.store.navigation({page:"CouponEdit"});
  }
  
  @computed get height(){return this.store.height;}
  @computed get website(){return this.store.website;}

  @computed get loading() {return this.coupon.loading;}
  @computed get data() {return toJS(this.coupon.data);}
  @computed get tm() {return this.coupon.tm;}
  @computed get tmRange() {return this.coupon.tmRange;}
  @computed get sfx() {return this.coupon.sfx;}
  @computed get num() {return this.coupon.num;}
  @computed get conditions() {return this.coupon.conditions;}
  @computed get conditionsAfter() {return this.coupon.conditionsAfter;}
  @computed get conditionsBefore() {return this.coupon.conditionsBefore;}
  
  _tm(date, dateStrings){
    console.log(date,dateStrings);
    this.coupon.set("data-tm",`${moment(dateStrings[0]).format("X")}-${moment(dateStrings[1]).format("X")}`);
  }

  render(){
    // console.log(this.data);
    const style={
      view:{
        padding:10,
        alignItems:"center"
      },
      span:{
        width:100,
        textAlign:"right"
      }
    };
    // 使用范围
    let scope;
    switch(this.data.scope){
      case 1:
        scope= <Input placeholder="商品ID" style={{marginLeft:5,flex:1}} value={this.data.pid?this.data.pid:""} onChange={e=>this.coupon.set("data-pid",/^[1-9]+\d*$/.test(e.target.value)?e.target.value:"")} />;
        break;
      case 2:
        scope= <Input placeholder="分类ID" style={{marginLeft:5,flex:1}} value={this.data.tid?this.data.tid:""} onChange={e=>this.coupon.set("data-tid",/^[1-9]+\d*$/.test(e.target.value)?e.target.value:"")} />;
        break;
      case 3:
        scope= <Input placeholder="商铺ID" style={{marginLeft:5,flex:1}} value={this.data.sid?this.data.sid:""} onChange={e=>this.coupon.set("data-sid",/^[1-9]+\d*$/.test(e.target.value)?e.target.value:"")} />;
        break;
      default:
        scope= null;
    }
    // 时效
    let tm;
    switch(this.tm){
      case 0:
        const arrTm = !this.data.tm?[]:this.data.tm.split("-");
        const defaultTm= [moment.unix(arrTm[0]),moment.unix(arrTm[1])];
        tm=(
          <RangePicker
            style={{marginLeft:5,flex:1}}
            inputReadOnly
            ranges={{
              "今天": [moment(), moment()],
              "这月": [moment().startOf('month'), moment().endOf('month')],
            }}
            showTime
            format="YYYY/MM/DD HH:mm:ss"
            onChange={(dates, dateStrings)=>this._tm(dates, dateStrings)}
            value={arrTm.length===2?defaultTm:""}
          />
        );
        break;
      case 1:
        tm=<Input
          style={{marginLeft:5,flex:1}}
          onChange={e=>{
            const v=e.target.value;
            if(!/^\d+$/.test(v)){return;}
            this.coupon.set("tmRange",v);
            this.coupon.set("data-tm",this.sfx*Number(v));
          }}
          value={this.tmRange}
          addonBefore="领取后"
          addonAfter={
            <View style={{flexDirection:"row"}}>
              <Select
                value={this.sfx}
                onSelect={v=>{
                  this.coupon.set("data-tm","");
                  this.coupon.set("tmRange","");
                  this.coupon.set("sfx",Number(v));
                }}
                >
                <Option value={1}>秒</Option>
                <Option value={60}>分</Option>
                <Option value={3600}>小时</Option>
                <Option value={86400}>天</Option>
                <Option value={2592000}>月</Option>
              </Select>
              <span style={{marginLeft:3}}>内有效</span>
            </View>
          }
        />;
        break;
      default:
        tm=null;
    }
    // 折扣条件
    let conditions;
    switch(this.conditions){
      case 0: //直减
        conditions=(
          <Input
            style={{marginLeft:5,flex:1}}
            addonBefore="直减"
            addonAfter="￥"
            value={this.data.conditions?this.data.conditions.replace("-",""):""}
            onChange={e=>this.coupon.set("data-conditions",`-${/^[1-9]+\d*$/.test(e.target.value)?e.target.value:""}`)}
          />
        );
        break;
      case 1: //满减
        conditions=(
          <Input.Group compact style={{marginLeft:5,flex:1}}>
            <Input
              value={this.conditionsAfter}
              onChange={e=>{
                if(/^[1-9]+\d*$/.test(e.target.value)){
                  this.coupon.set("conditionsAfter",e.target.value);
                  const arr = this.data.conditions?this.data.conditions.split("-"):["",""];
                  arr[0]=e.target.value;
                  this.coupon.set("data-conditions",arr.join("-"));
                }else{
                  this.coupon.set("conditionsAfter","");
                }
              }}
              style={{width:"50%"}}
              addonBefore="满"
              addonAfter="￥减"
            />
            <Input
              value={this.conditionsBefore}
              onChange={e=>{
                if(/^[1-9]+\d*$/.test(e.target.value)){
                  this.coupon.set("conditionsBefore",e.target.value);
                  const arr = this.data.conditions?this.data.conditions.split("-"):["",""];
                  arr[1]=e.target.value;
                  this.coupon.set("data-conditions",arr.join("-"));
                }else{
                  this.coupon.set("conditionsAfter","");
                }
              }}
              style={{width:"50%"}}
              addonAfter="￥"
            />
          </Input.Group>
        );
        break;
      case 2: //折扣
        conditions=(
          <Input
            style={{marginLeft:5,flex:1}}
            addonAfter="折"
            value={this.data.conditions}
            onChange={e=>this.coupon.set("data-conditions",/^[1-9]+\d{0,2}$/.test(e.target.value)?(e.target.value<=100?e.target.value:100):"")}
          />
        );
        break;
      default:
        conditions=null;
    }
    return(
      <View style={{height:this.height-50,width:"100%",flexDirection:"column"}}>
        <View style={{overflowY:"auto",flex:1,flexDirection:"column",maxWidth:700}}>
          <View style={style.view}>
            <span style={style.span}>有效时间：</span>
            <RangePicker
              inputReadOnly
              style={{flex:1}}
              ranges={{
                "今天": [moment(), moment()],
                "这月": [moment().startOf('month'), moment().endOf('month')],
              }}
              showTime
              format="YYYY/MM/DD HH:mm:ss"
              onChange={(dates, dateStrings)=>{
                this.coupon.set("data-starttime",moment(dateStrings[0]).format("X"));
                this.coupon.set("data-endtime",moment(dateStrings[1]).format("X"));
              }}
              value={this.data.endtime&&this.data.starttime?[moment.unix(this.data.starttime),moment.unix(this.data.endtime)]:[]}
            />
          </View>
          <View style={style.view}>
            <span style={style.span}>发布者：</span>
            <Radio.Group
              value={this.data.sys}
              onChange={e=>{
                this.coupon.set("data-sys",Number(e.target.value))
              }}
              >
              <Radio.Button value={0}>商家发布</Radio.Button>
              <Radio.Button value={1}>系统发布</Radio.Button>
            </Radio.Group>
          </View>
          <View style={style.view}>
            <span style={style.span}>使用范围：</span>
            <Radio.Group
              value={this.data.scope !== undefined?this.data.scope:-1}
              onChange={e=>{
                this.coupon.set("data-scope",Number(e.target.value));
                switch(Number(e.target.value)){
                  case 0:
                    this.coupon.set("data-pid",0);
                    this.coupon.set("data-tid",0);
                    break;
                  case 1:
                    this.coupon.set("data-tid",0);
                    break;
                  case 2:
                    this.coupon.set("data-pid",0);
                    break;
                  case 3:
                    this.coupon.set("data-sid",0);
                    break;
                }
              }}>
              <Radio.Button value={0}>全场</Radio.Button>
              <Radio.Button value={1}>单品</Radio.Button>
              <Radio.Button value={2}>单类</Radio.Button>
              <Radio.Button value={3}>单店</Radio.Button>
            </Radio.Group>
            {scope}
          </View>
          <View style={style.view}>
            <span style={style.span}>领用次数：</span>
            <Radio.Group 
              value={this.num}
              onChange={e=>this.coupon.set("num",Number(e.target.value))}>
              <Radio.Button value={0}>无限次数</Radio.Button>
              <Radio.Button value={1}>有限次数</Radio.Button>
            </Radio.Group>
            {
              this.num<1?
              null:
              <Input
                style={{marginLeft:5,flex:1}}
                value={this.data.num}
                onChange={e=>this.coupon.set("data-num",/^[1-9]+\d*$/.test(e.target.value)?e.target.value:"")}
              />
            }
          </View>
          <View style={style.view}>
            <span style={style.span}>选择时效：</span>
            <Radio.Group
              value={this.tm}
              onChange={e=>{
                this.coupon.set("data-tm","");
                this.coupon.set("tm",Number(e.target.value));
              }}
              >
              <Radio.Button value={0}>绝对时间</Radio.Button>
              <Radio.Button value={1}>相对时间</Radio.Button>
            </Radio.Group>
            {tm}
          </View>
          <View style={style.view}>
            <span style={style.span}>使用条件：</span>
            <Radio.Group
              value={this.conditions}
              onChange={e=>{
                this.coupon.set("data-conditions","");
                this.coupon.set("conditions",Number(e.target.value));
              }}
              >
              <Radio.Button value={0}>直减</Radio.Button>
              <Radio.Button value={1}>满减</Radio.Button>
              <Radio.Button value={2}>折扣</Radio.Button>
            </Radio.Group>
            {conditions}
          </View>
          <View style={style.view}>
            <span style={style.span}>简介内容：</span>
            <Input
              placeholder="简介 30个字符以内"
              value={this.data.cont||""}
              onChange={e=>this.coupon.set("data-cont",e.target.value)}
            />
          </View>
        </View>
        <Button onClick={()=>this.coupon.submit()} loading={this.loading} danger type="primary">保存优惠券配置</Button>
      </View>
    );
  }
}

export default CouponEdit;